<template>
  <div>
    <!-- <div style="width:100%;height:100%"> -->
    <div style="width:100%;height:100%;display:flex;color:#fff" class="divBox">
      <div style="min-width: 100%;flex: 1;height: auto;overflow: auto;" id="leftDiv">
        <a-card title="指令配置" style="width: 100%;text-align: center">
          <div class="configInstructionBox">
            <span style="font-size:16px;margin-right:20px">{{ instructionType }}:</span>
            <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col :span="8" v-for="item in descList" :key="item.grid">
                  <a-form-model-item :label="item.label">
                    <a-input v-model="formData[item.key]" placeholder="请输入">
                    </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>

            </a-form-model>
          </div>
        </a-card>

        <a-card title="指令配置结果" style="width: 100%;text-align: center;">
          <div>
            <div>
              <span>确定{{ instructionType }}是:</span>
              <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row>
                  <a-col :span="8" v-for="item in descList" :key="item.grid">
                    <a-form-model-item :label="item.label">
                      <a-input read-only v-model="formData[item.key]" placeholder="请输入">
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>

              </a-form-model>
            </div>
            <a-button type="primary" @click="generateInstructionContent()">生成指令内容
            </a-button>
          </div>
        </a-card>
      </div>

    </div>
  </div>
</template>

<script>
import { Turns } from '@/utils/util'
import { httpAction, getAction } from '@/api/manage'
import resourcePool1 from '../../antiInterferenceStrategy/components/modules/resourcePool1.vue'
import { mapGetters } from 'vuex'

export default {
  components: { resourcePool1 },
  props: ['instructionType'],
  data() {
    let checkId1 = (rule, value, callback) => {
      const regex = /^[0-9A-Fa-f]{4}$/
      if (value === '') {
        callback('输入的字符串不能为空')
      } else {
        if (regex.test(value)) {
          callback()
        } else {
          console.log(value, 'value')
          callback('输入的字符串不是一个有效的4位十六进制数')
        }
      }

    }
    return {
      url: {
        getByParamCodes: '/telemetryInfo/nmcTelemetryInfo/getByParamCodes',
        configInstruction: '/grid/nmcPackageInfo/serializeDefaultValue2',
        getCurrentDayTimeDifference: '/starEarthTiming/nmcStarEarthTiming/getCurrentDayTimeDifference',
        getCurrentDayTimingInfo: "/starEarthTiming/nmcStarEarthTiming/getCurrentDayTimingInfo",
        doSetStarEarthTimingAlarmThreshold: '/starEarthTiming/nmcStarEarthTiming/doSetStarEarthTimingAlarmThreshold'
      },
      isSetTimingAlarmThresholdVisable: false,
      currentDayTimingInfo: [],
      formThreshold: {},
      starEarthTimingAlarmThreshold: '',
      formData: {},
      changeBllidValidate: true,
      value1Length: 0,
      idCa: [],
      params: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      formInline: {

      },
      instructionValue: undefined,
      instructionName: '',
      lastItemId: 0, //上次选中的节点Id
      isDrop: false, //是否正在拖拽
      checkGroup: [],
      checkGroup1: [],
      checkNos: [],
      lsArr: [],
      lsArrS: [],
      flag: true,
      pointInfo: '',
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      currentDayTimeDifference: undefined,
      descList: [
        {
          label: '发送端识别码',
          key: 'SenderCode',
          grid: '11-发送端识别码'
        },
        {
          label: '指控车识别码',
          key: 'vehicleIdentification',
          grid: '11-指挥车识别码'
        },
        {
          label: '入网认证码',
          key: 'NetworkCode',
          grid: '11-指挥车入网认证码'
        }
      ],
      timer: null,
      rules: {},
      paramCodes: 'VX612',//默认是L可控接收机1本振加指令
      mappingList: [
        {
          id: 1,
          packName: '移动车入网申请',
          packCode: '11指挥车入网申请',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '11-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '11-指挥车识别码'
            },
            {
              label: '入网认证码',
              key: 'NetworkCode',
              grid: '11-指挥车入网认证码'
            }
          ]
        },

        {
          id: 2,
          packName: '移动车入网确认',
          packCode: '13指挥车入网确认',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '13-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '13-指挥车的识别码'
            },
            {
              label: '入网状态',
              key: 'NetworkCode',
              grid: '13-指挥车的入网状态'
            }
          ]
        },
        {
          id: 3,
          packName: '移动车网络状态回复',
          packCode: '18指挥车网络状态回复',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '18-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '18-指挥车识别码'
            },
            {
              label: '在网状态',
              key: 'NetworkCode',
              grid: '18-指控车在网状态'
            },
            {
              label: '设备状态',
              key: 'EquipmentStatus',
              grid: '18-指挥车设备状态'
            },
            {
              label: '使用时隙个数',
              key: 'NumberSlotsUsed',
              grid: '18-使用时隙个数'
            },
            {
              label: '使用的时隙号',
              key: 'TimeSlotNumberUsed',
              grid: '18-使用具体的时隙号'
            },
            {
              label: '星指下行链路速率档位',
              key: 'SpeedGear',
              grid: '18-星指下行链路使用速率档位'
            },
            {
              label: '星指下行链路信噪比',
              key: 'SignalNoiseRatio',
              grid: '18-星指下行链路信噪比'
            }
          ]
        },
        {
          id: 4,
          packName: '移动车退网申请',
          packCode: '35指挥车退网申请',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '35-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'vehicleIdentification',
              grid: '35-指挥车识别码'
            },
            {
              label: '入网认证码',
              key: 'NetworkCode',
              grid: '35-指挥车入网认证码'
            },
            {
              label: '各弹均完成退网标识符',
              key: 'NetworkWithdrawalIdentifier',
              grid: "35-各弹均完成退网标识符"
            }
          ]
        },
        {
          id: 5,
          packName: '移动车退网确认',
          packCode: '37指挥车退网确认',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '37-发送端识别码'
            },
            {
              label: '指控车识别码',
              key: 'OfflineStatus',
              grid: '37-该指挥车的退网状态'
            },
          ]
        },
        {
          id: 6,
          packName: '星车周期交互启动',
          packCode: '42星车周期交互启动指令',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '43-发送端识别码'
            },
            {
              label: '武器平台识别码',
              key: 'WeaponPlatformIdentificationCode',
              grid: '42-武器平台识别码'
            },
            {
              label: '星车交互启动指令码',
              key: 'CommandCode',
              grid: '42-星车交互启动指令码'
            },
          ]
        },
        {
          id: 7,
          packName: '星车对时',
          packCode: '49星车对时指令',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '49-发送端识别码'
            },
            {
              label: '对时指令',
              key: 'TimingInstruction',
              grid: '49-对时指令'
            },
          ]
        },
        {
          id: 8,
          packName: '链路测试指令',
          packCode: '47链路测试',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '47-发送端识别码'
            },
            {
              label: '测试码字',
              key: 'TestCodeWords',
              grid: '47-测试码字'
            },
          ]
        },
        {
          id: 9,
          packName: '车-车自定义信息',
          packCode: '129-车-车自定义信息',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '129-发送端识别码'
            },
            {
              label: '有效内容',
              key: 'EffectiveContent',
              grid: '129-有效内容'
            },
          ]
        },
        {
          id: 10,
          packName: '车-地自定义信息',
          packCode: '130-车-地自定义消息',
          paramList: [
            {
              label: '发送端识别码',
              key: 'SenderCode',
              grid: '130-发送端识别码'
            },
            {
              label: '有效内容',
              key: 'EffectiveContent',
              grid: '130-有效内容'
            },
          ]
        },
      ],

    }
  },
  watch: {
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        let msg = JSON.parse(val)
        if (msg.cmd === 'STAR_EARTH_TIMING_RESPONSE') {
          this.getCurrentDayTimingInfo();
        }
      },
    },
    instructionName(val, b) {
      let that = this
      this.formData = {}
      // this.$emit('resetInstructionContent')
      this.descList = this.mappingList.find(i => i.packName == this.instructionName) ? this.mappingList.find(i => i.packName == this.instructionName).paramList : []

    }
  },
  mounted() {
    this.instructionName = this.mappingList[0].packName
    this.descList = [...this.mappingList[0].paramList]

  },
  destroyed() {
  },
  filter: {
    ellipsis(value) {
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value;
    }
  },
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  methods: {
    // 1、书写过滤函数

    handleOk(e) {
      let data = new URLSearchParams(Object.entries({ millisecond: this.formThreshold.threshold }))
      httpAction(this.url.doSetStarEarthTimingAlarmThreshold, data, 'post').then(res => {
        if (res.success) {
          this.isSetTimingAlarmThresholdVisable = false
          this.$message.success(res.message)
          this.getCurrentDayTimingInfo()
        } else {
          // this.isSetTimingAlarmThresholdVisable=false
          this.$message.error(res.message)
        }
      })
    },
    setStarEarthTimingAlarmThreshold() {
      this.isSetTimingAlarmThresholdVisable = true
      //设置阈值

    },
    setInstructionType(val) {
      this.instructionName = val
    },
    getCurrentDayTimingInfo() {
      getAction(this.url.getCurrentDayTimingInfo, {}).then(res => {
        if (res.success) {
          this.currentDayTimingInfo = [...res.result.nmcStarEarthTimings]
          this.starEarthTimingAlarmThreshold = res.result.starEarthTimingAlarmThreshold
          this.currentDayTimeDifference = res.result.averageTimeDifference
        }
      })
    },
    // getCurrentDayTimeDifference(){
    //   getAction(this.url.getCurrentDayTimeDifference).then(res=>{
    //     this.currentDayTimeDifference=res.result
    //   })
    // },
    /**
     * 验证值是否字节对齐
     * 1ACF true
     * 1ACF1  false
     * 1ACF1D true
     * @param val 待验证的值
     */
    verifyByteAlignment(val) {
      if (!val) {
        return;
      }
      if (val.length % 2 !== 0) {
        this.$message.error("内容必须进行字节对齐，否则无法序列化！");
      }
    },
    changeBllid(val, type, text, instruct) {
      if (this.instructionType != instruct) return
      var level = type
      var reg = new RegExp('^[A-Fa-f0-9]{' + level + '}$')
      if (reg.test(val)) {
        this.flag = true
        return
      } else {
        this.flag = false
        if (instruct == this.instructionType) this.$message.error(text + `请输入${type / 2}个两位的十六进制数`)
        return
      }
    },
    emptyData() {
      if (this.subData.lenght > 0) {
        this.subData.forEach(i => {
          i.check = false
        })
      }

      this.formInline = {
        uplinkRateMode: '0000',
        downlinkRateMode: '0000',
        uplinkFrequencyHoppingControl: '0000',
        downlinkFrequencyHoppingControl: '0000',
        workingMode: '00',
        LControllableReceiver: '0',
        downlinkFrequencyPoint: '00',
        rateMode: '00'
      },
        this.idCa = []
      this.instructionValue = undefined
      this.pointInfo = ''
      this.params = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]

    },
    boxdown: function () {
      //鼠标按下开始拖选
      this.isDrop = true
    },
    subenter: function (item) {
      //拖选中子元素
      if (this.isDrop) {
        if (this.lastItemId != item.id) {
          var min = this.lastItemId <= item.id ? this.lastItemId : item.id
          var max = this.lastItemId < item.id ? item.id : this.lastItemId
          if (this.lastItemId - item.id < 0) {
            //正方向
            for (var i = min; i < Math.abs(this.lastItemId - item.id) + min; i++) {
              this.subData[i].check = !this.subData[i].check
            }
          } else {
            //反方向
            for (var i = max - 1; i > min - 1; i--) {
              this.subData[i].check = !this.subData[i].check
            }
          }
          this.lastItemId = item.id
        }
      }
    },
    subdown: function (item) {
      if (item.disabled) return
      //单个选中子元素(一次选中6个)
      this.lastItemId = item.id
      item.check = !item.check //单个
      if (this.group) {
        let d = []
        let c = this.subData
        for (let i = 0; i < c.length; i += 6) {
          d.push(c.slice(i, i + 6))
        }
        this.checkGroup = []
        d.forEach((el, index) => {
          let temp = el.find((e) => e.id == item.id)
          if (temp) {
            el.forEach((i) => {
              i.check = item.check //6个一起
            })
          }
        })
        d.forEach((c, index) => {
          if (c[0].check) {
            this.checkGroup.push(index)
          }
        })
      } else {
        if (item.check) {
          this.checkNos.push(item.id)
        } else {
          this.checkNos = this.checkNos.filter((i) => i != item.id)
        }
      }
    },
    subUp: function (item) {

      //鼠标抬起取消拖选
      this.isDrop = false
    },
    boxup: function () {
      //鼠标抬起取消拖选
      this.isDrop = false
      let arr = []
      this.subData.forEach(i => {
        if (i.check) {
          arr.push(i.id)
        }
      })
      this.pointInfo = arr.join(',')
    },
    boxleave: function () {
      //当鼠标移出区域块时，视为取消拖选
      this.isDrop = false
    },

    handleAddValue() {
      this.instructionValue += 1
    },
    handleReduceValue() {
      this.instructionValue -= 1
    },
    changeValue(val) {
      // console.log(Number(val) ,'val')
      let length = parseInt(val, 16)
      this.value1Length = length * 2
    },
    generateInstructionContent() {

      let selectIns = this.mappingList.find(i => i.packName == this.instructionName)
      let data = {
        'packageCode': selectIns.packCode,
        'serializeItemDtoList': [
        ]
      }
      this.descList.forEach(i => {
        data.serializeItemDtoList.push({ packageGridCode: i.grid, packageGridValue: this.formData[i.key] })

      })
      httpAction(this.url.configInstruction, data, 'post').then(res => {
        console.log(res, 'ressssss=========')

        this.$emit('setInstructionContent', res.result, data.packageCode)
        //传给父组件instructionContent
      })

    },
  }
}
</script>

<style>
.currentDayTimeDifferenceBox {
  /* padding-top: 20px;
  margin-top: 20px; */
  /* border-top: 1px solid; */
}

.divBox .ant-descriptions-title {
  color: #fff !important;
  margin-top: 10px;
}

.divBox .ant-descriptions-item>span {
  font-size: 16px;
}
</style>

<style lang="less" scoped>
.instructionValueBox .ant-input-number .ant-input-number-handler-wrap {
  display: none !important;
  margin: 0;
}

.subData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .SZLBQBox {
    width: 40px;
    height: 40px;
    line-height: 40px;
    user-select: none;

    // border: 1px solid #ad1616;
    .offcheck,
    .oncheck,
    .disabledStyle {
      line-height: 40px;
    }
  }
}

.offcheck,
.oncheck,
.disabledStyle {
  width: 100%;
  height: 100%;
  border: 1px solid #7e7979;
  margin: -1px 0 0 -1px;
  text-align: center;
}

.offcheck {
  color: #000;
  background: #f51616;
}

.disabledStyle {
  color: #898383;
  // background: #868686;
  background: linear-gradient(45deg,
      rgba(117, 117, 117, 0.6) 0,
      rgba(117, 117, 117, 0.6) 10%,
      rgba(42, 44, 43, 1) 10%,
      rgba(42, 44, 43, 1) 20%,
      rgba(117, 117, 117, 0.6) 20%,
      rgba(117, 117, 117, 0.6) 30%,
      rgba(42, 44, 43, 1) 30%,
      rgba(42, 44, 43, 1) 40%,
      rgba(117, 117, 117, 0.6) 40%,
      rgba(117, 117, 117, 0.6) 50%,
      rgba(42, 44, 43, 1) 50%,
      rgba(42, 44, 43, 1) 60%,
      rgba(117, 117, 117, 0.6) 60%,
      rgba(117, 117, 117, 0.6) 70%,
      rgba(42, 44, 43, 1) 70%,
      rgba(42, 44, 43, 1) 80%,
      rgba(117, 117, 117, 0.6) 80%,
      rgba(117, 117, 117, 0.6) 90%,
      rgba(42, 44, 43, 1) 90%,
      rgba(42, 44, 43, 1) 100%);
}

.oncheck {
  color: #000;
  background: #36f73f;
}
</style>
